<template>
    <div class="page">
        <Header :tabs="tabs" :page="curPage" @change="onPageChange"/>
        <TabView :page="curPage">
            <TabContent :key="i" v-for="(tab,i) in tabs">
                <Pager :tab="tab.id"/>
            </TabContent>
        </TabView>
        <!--<button class="menu" @click="openMenu" />-->
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {
        TabView
    } from '../../components';

    const {
        Header,
        Content,
        Container
    } = TabView;

    import {
        Component
    } from 'vue-property-decorator';

    import {
        Tab
    } from './../../components/TabView';

    import Menu from './components/Menu.vue';
    import Pager from './components/Pager.vue';

    @Component({
        name: `Topics`,
        components: {
            Header,
            Pager,
            TabContent: Content,
            TabView: Container,
        }
    })
    export default class Topic extends Vue {
        tabs: Array<Tab> = ([
            {id: `all`, name: `全部`},
            {id: `good`, name: `精华`},
            {id: `share`, name: `分享`},
            {id: `ask`, name: `问答`},
            {id: `job`, name: `招聘`},
            {id: `dev`, name: `测试`}
        ]);

        dialog: any = null;
        curPage: number = 0;

        created() {
            this.dialog = (
                new this.$dialog(Menu)
            );
        }

        mounted(){
            // this.openMenu()
        }
        
        private openMenu() {
            this.dialog.show({
                position: `left`,
                clickClose: true
            })
        }

        deactivated() {
            this.dialog.close();
        }

        private onPageChange(page: number): void {
            this.curPage = page;
        }
    }
</script>

<style scoped lang="scss">
    @import './../../common/var.scss';
    .page {
        height: 100%;
        padding-top: 48px;
        position: relative;
    }

    .menu {
        width: 40px;
        height: 40px;
        border-radius: 4px;
        box-shadow: 1px 1px 5px #ccc;
        position: absolute;
        bottom: 30px;
        right: 20px;
        z-index: 10;
        background-color: #fff;
        background-image: url("./../../static/menu@2x.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 90% auto;

        &:active {
            background-color: #f6f6f6;
        }
    }
</style>